<template>
	<view class="page page-product">
		<view class="overflow-auto" pt-5px mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<view class="second-type-wrap">
			<view class="cat-item" v-for="(v,k) in secondTypes" :class="{'active': secondKey == k}" :key="v.id" @click="changeCat(v.id, k)">
				<image v-if="v.icon_thumb" class="cat-img" :src="v.icon_thumb" mode="aspectFill" />
				<image v-else class="cat-img" src="@/static/images/category.png" mode="aspectFill" />
				<view text-center pb-10px whitespace-nowrap overflow-hidden>{{ v.name }}</view>
			</view>
		</view>

		<view class="list-wrap" v-if="list.length">
			<template v-for="(v,k) in list" :key="v.goods_id">
				<view class="list-item" @click="goProduct(v.goods_id)">
					<image class="logo" :src="v.image_thumb" mode="aspectFill" />
					<view class="right">
						<view>
							<view text-base fw-600 truncate>{{ v.name }}</view>
							<view text-s c-gray-5 truncate>{{ v.description }}</view>
							<view c-red-5 fw-500 text-base>￥{{ v.price || '可议价' }}</view>
							<view text-s c-gray-5 truncate pb-4px>热卖：{{ v.putaway }}</view>
						</view>
						<view class="to-store" @click.stop="goStore(v.shop_id)">
							<view text-s c-gray-5 truncate>{{ v.firm.firm_name }}</view>
							<view pl-5px pr-2px>进店</view>
							<view class="icon icon-angle-right"></view>
						</view>
					</view>
				</view>
				<divider spacing="10px"></divider>
			</template>
		</view>

		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>

	</view>

</template>

<script setup>
	import api from '@/api'
	import { ref,computed } from 'vue'

	const {category_id, keyword} = defineProps({
		category_id: {
			type: [String, Number],
			default: 0
		},
		keyword: {
			type: String,
			default: ''
		},
	})

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loadedAll = ref(false)
	const loading = ref(false)
	const list = ref([])
	const current = ref(0)
	let current_id = category_id

	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		secondKey.value = -1
		list.value = []
		current_id = types[currentIndex].id
		getList()
	}


	const goProduct = id => {
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

	const goStore = id => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${id}`
		})
	}

	const secondTypes = computed(() => {
		return current.value? types[current.value].child : []
	}) 
	const secondKey = ref(-1)
	const changeCat = (id,k) => {
		secondKey.value = k
		current_id = id
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}



	let types = []
	const tabs = ref([])
	async function fn(){
		const catRes = await api.goodsCatListAll({})
		types = [{ name: '全部', id: 0 }, ...catRes]
		tabs.value = types.map(i => i.name)
		if(category_id) {
			let index = types.findIndex(i => i.id == category_id)
			current.value = index < 0 ? 0 : index
		}
		getList()
	}
	fn()

	async function getList() {
		if(loadedAll.value) return
		if(loading.value) return
		loading.value = true
		const data = await api.goodsList({
			page_size: page_size.value,
			page_no: page_no.value,
			category: current_id || 0,
			keyword
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}


</script>

<style lang="scss">
.page-product {

	.second-type-wrap {
		overflow-x: auto;
		display: flex;
		.cat-item {
			width: 100upx;
			padding: 20rpx 20rpx 0;
			
			&.active .cat-img {
				box-shadow: 0 0 10px 4px #3fb491;
			}
		}
		.cat-img {
			width: 100upx;
			height: 100upx;
			font-size: 100upx;
		}
		
	}

	.list-wrap {
		padding: 15px;
		.list-item {
			display: flex;
			align-items: center;
			
			.logo {
				width: 240upx;
				height: auto;
				aspect-ratio: 3/4;
			}

			.right {
				padding-left: 15px;
				flex: 1;
				align-self: stretch;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.to-store {
				display: inline-flex;
				align-items: center;
				align-self: flex-end;
				background-color: #f1f1f1;
				border-radius: 100px;
				padding: 10upx 20upx;
				box-sizing: border-box;
			}
		}
	}

}

</style>

